<template>
  <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
</template>

<script>
var content = [
  "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
];

export default {
  name: "Map",
  data() {
    return {}
  },
  mounted() {
    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 12,
      center: [116.396901, 39.919544],
      resizeEnable: true
    });
    // 创建 infoWindow 实例
    var infoWindow = new AMap.InfoWindow({
      content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
    });
    var clickHandler = function(e) {
      console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');

      infoWindow.open(map, [116.396901,39.919544]);
    };
    var marker = new AMap.Marker({
      position: new AMap.LngLat(116.396901, 39.919544),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '北京故宫',
    });
    marker.on('click', clickHandler);
    // 将创建的点标记添加到已有的地图实例
    map.add(marker);
  },
  methods: {}
}
</script>

<style scoped>

</style>
